<template>
  <div class="address">
    <my-header title="地址管理">
      <template #right>
        <slot name="right"> &nbsp; </slot>
      </template>
    </my-header>

    <!-- 地址列表数据渲染 -->
    <div class="addressList">
      <div class="addressWrap">
        <van-address-list
          v-model="chosenAddressId"
          :list="addressList"
          default-tag-text="默认"
          @add="onAdd"
          @edit="onEdit"
          @select="changeAddress"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { AddressList } from "vant";
import { Toast } from "vant";
export default {
  data() {
    return {
      // 地址列表数据
      addressList: [],
      // 选中的地址的ID
      chosenAddressId: this.$route.query.choosenId
        ? this.$route.query.choosenId
        : 1,
    };
  },
  methods: {
    onAdd() {
      this.$router.push({ name: "addaddress" });
      // Toast("新增地址");
    },
    onEdit(item, index) {
      // 修改地址
      // this.$ajax.changeAddressData({ this.addressList[index].id,data:{} });
      this.$router.push({ name: "editaddress", params: { item } });
      // Toast("编辑地址:" + index);
    },
    // 跳转到添加地址页面
    gotoAddAddress() {
      this.$router.push({ name: "addaddress" });
    },
    // 获取地址数据
    async getAddress() {
      let res = await this.$ajax.getAddressData({ uid: this.userInfo.id });
      console.log(res);
      this.addressList = res;
    },
    // 跳转回购物车页面并携带改变的地址  ----弃用
    // changeAddress(){
    //   this.$router.push({name:'order',params:{...this.addressList}})
    // }
    changeAddress() {
      // this.$bus.$emit("changeAddress", {});
      // console.log(this.addressList[this.chosenAddressId-1]);
      // console.log(this.chosenAddressId);
    },
  },
  mounted() {
    this.getAddress();
  },
  watch: {
    chosenAddressId(v) {
      // console.log(v);
      // console.log(this.addressList[v]);
      this.chosenAddressId = v;
      this.$router.push({ name: "order", query: { addressId: v } });
    },
  },
};
</script>

<style lang="scss" scoped>
.address {
  width: 100%;
  background: #eee;
  .addaddress {
    position: fixed;
    bottom: 0;
    width: 100%;
    text-align: center;
    span {
      display: inline-block;
      width: 90%;
      color: #fff;
      height: 40px;
      line-height: 40px;
      background: linear-gradient(to left, #e680ff, #ff80aa);
      border-radius: 20px;
    }
  }
}
</style>